<template>
  <div class="dashboard-container">
    <h1>人生何处不相逢</h1>
    
    <div class="dashboard-container">
    <div class="item">
      <h1>学校统计</h1>
      <h1 style="text-align:center">{{schoolCount}}</h1>
      </div>
    </div>

    <div class="dashboard-container">
    <div class="item">
      <h1>学院统计</h1>
      <h1 style="text-align:center">{{academyCount}}</h1>
      </div>
    </div>

    <div class="dashboard-container">
    <div class="item">
      <h1>班级统计</h1>
      <h1 style="text-align:center">{{classCount}}</h1>
      </div>
    </div>

    <div class="dashboard-container">
    <div class="item">
      <h1>学生统计</h1>
      <h1 style="text-align:center">{{studentCount}}</h1>
      </div>
    </div>

    <div class="dashboard-container">
    <div class="item">
      <h1>老师统计</h1>
      <h1 style="text-align:center">{{teacherCount}}</h1>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
   data(){
      return{
        students:{},
        studentCount:0,
         teachers:{},
        teacherCount:0,
         classs:{},
        classCount:0,
         academys:{},
        academyCount:0,
         schools:{},
        schoolCount:0,
       }
    },
    
     
    mounted(){
      this.$http.get('/api/users/add').then(res => {
        console.log('this.panels', res)
       })
      this.$http.post('/api/student/get').then(res => {
        this.students = res;
        this.studentCount = this.students.length;
       })
      this.$http.post('/api/school/get').then(res => {
        this.schools = res;
        this.schoolCount = this.schools.length;
      })
      this.$http.post('/api/academy/get').then(res => {
        this.academys = res;
        this.academyCount = this.academys.length;
      })
      this.$http.post('/api/classs/get').then(res => {
        this.classss = res;
        this.classsCount = this.classss.length;
      })
      this.$http.post('/api/teacher/get').then(res => {
        this.teachers = res;
        this.teacherCount = this.teachers.length;
      })
    }
  }
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.dashboard-container{
    display: flex;
  }

  .item{
    text-align: center;
    transition: all 0.6s;
    position: relative;
    top:0;
    border-radius: 5px;
    box-shadow: 0 0 0 0 rgbe(0,0,0,0.1);
    padding: 10px;
  }
  .item:hover{
    top:-50;
    box-shadow: 1px 10px 15px 2px rgba(0,0,0,0.1);
  }
</style>
